<template>
    <view class="content">
        <image :src="IMAGEURL + 'static/image/img_bg.png'" class="img-bg"></image>
        <u-navbar :background="background" title="我的" title-color="#000" :border-bottom="false" :immersive="true" :is-back="false"></u-navbar>
        
        <view class="wrapper" :style="{paddingTop: statusBar + 50 + 'px'}">
            <view class="info">
                <button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
                    <image class="avatar" :src="avatarUrl"></image>
                </button>
                
                <view class="u-flex-1">
                    <!-- <view class="name">{{ info.user_name || '用户名' }}</view> -->
                    <input type="nickname" class="info-name" placeholder="用户名" v-model="nickname" @blur="blur" />
                    <view class="info-tel" v-if="info.mobile">
                        <image :src="IMAGEURL + 'static/icon/tel_02.png'" class="tel-02"></image>
                        <view>{{info.mobile}}</view>
                    </view>
                </view>
            </view>
            
            <!-- <view class="top">
                <view class="top-nav">
                    <view class="top-nav-item" @click="toPage(`/mine/pages/child-info/child-info`)">
                        <image :src="IMAGEURL + 'static/icon/icon_07.png'" class="icon-07"></image>
                        <view>孩子资料</view>
                    </view>
                    <view class="top-nav-item" @click="toPage(`/mine/pages/other/collect`)">
                        <image :src="IMAGEURL + 'static/icon/icon_08.png'" class="icon-07"></image>
                        <view>我的收藏</view>
                    </view>
                    <view class="top-nav-item" @click="toPage(`/mine/pages/other/browse`)">
                        <image :src="IMAGEURL + 'static/icon/icon_09.png'" class="icon-07"></image>
                        <view>我的浏览</view>
                    </view>
                    <view class="top-nav-item" @click="toPage(`/mine/pages/coupon/coupon`)">
                        <image :src="IMAGEURL + 'static/icon/icon_10.png'" class="icon-07"></image>
                        <view>领券中心</view>
                    </view>
                </view>
                <view class="top-see">
                    <view>服务报销</view>
                    <view class="top-see-sub">进入查看全部报销信息</view>
                    <view class="top-see-btn" @click="toPage(`/mine/pages/other/baoxiao`)">
                        <view>查看</view>
                        <image :src="IMAGEURL + 'static/icon/next.png'" class="next-icon"></image>
                    </view>
                </view>
            </view> -->
            <!-- 伙伴在线 充值中心 -->
            <!-- <image :src="IMAGEURL + 'static/image/img_04.png'" class="img-04" @click="toPage(`/mine/pages/recharge/recharge`)"></image> -->
            <!-- <view class="down-nav"> -->
                <!-- 我的优惠券 -->
                <!-- <image :src="IMAGEURL + 'static/image/img_05.png'" class="img-05" @click="toPage(`/mine/pages/coupon/coupon-list`)"></image> -->
                <!-- 我的合同 -->
                <!-- <image :src="IMAGEURL + 'static/image/img_06.png'" class="img-05"></image> -->
                
                <!-- 服务人员中心 -->
                <!-- <image :src="IMAGEURL + 'static/image/img_08.png'" class="img-05" v-if="info && info.status == 4" @click="$gTo(`/serve/pages/tab/home`)"></image> -->
                <!-- 服务人员申请 -->
                <!-- <image :src="IMAGEURL + 'static/image/img_07.png'" class="img-05" v-else @click="toApply"></image> -->
            <!-- </view> -->
            <view class="down">
                <!-- <view class="item" @click="toPage(`/mine/pages/address/address`)">
                    <image :src="IMAGEURL + 'static/icon/icon_11.png'" class="icon-11"></image>
                    <view>地址管理</view>
                    <u-icon name="arrow-right" color="#a7a7a7" size="32"></u-icon>
                </view> -->
                <view class="item" @click="KFshow = true">
                    <image :src="IMAGEURL + 'static/icon/icon_12.png'" class="icon-11"></image>
                    <view>客户中心</view>
                    <u-icon name="arrow-right" color="#a7a7a7" size="32"></u-icon>
                </view>
                <view class="item" @click="toPage(`/mine/pages/other/about`)">
                    <image :src="IMAGEURL + 'static/icon/icon_13.png'" class="icon-11"></image>
                    <view>平台介绍</view>
                    <u-icon name="arrow-right" color="#a7a7a7" size="32"></u-icon>
                </view>
                <view class="item" @click="toPage(`/mine/pages/other/feedback`)">
                    <image :src="IMAGEURL + 'static/icon/icon_14.png'" class="icon-11"></image>
                    <view>反馈意见</view>
                    <u-icon name="arrow-right" color="#a7a7a7" size="32"></u-icon>
                </view>
            </view>
        </view>
        
        <!-- 客服中心 -->
        <u-mask :show="KFshow" mode="center" border-radius="15">
            <view class="popup">
                <view class="win-box2">
                    <view class="pop-up">
                        <view>客服中心</view>
                        <image :src="IMAGEURL + 'static/image/img_09.png'"></image>
                    </view>
                    <view class="pop-call">
                        <view>
                            <view class="school">咨询热线</view>
                            <view class="u-font-34 text-bold">{{ service.service_phone }}</view>
                        </view>
                        <image :src="IMAGEURL + 'static/image/img_tel.png'" @click="$call(service.service_phone)"></image>
                    </view>
                    <image @click="KFshow = false" class="pop-del" :src="IMAGEURL + 'static/icon/close_02.png'"></image>
                </view>
            </view>
        </u-mask>
        
        <!-- 底部导航 -->
        <u-tabbar v-model="current" :list="tab_list" active-color="#f29700" :border-top="false" height="120" @change="tabbarChange"></u-tabbar>
    </view>
</template>

<script>
    import { URL } from '@/static/js/common.js';
    import { IMAGEURL } from '@/static/js/common.js';
    const defaultAvatarUrl = IMAGEURL + 'static/icon/avatar.png'
    export default {
        data() {
            return {
                IMAGEURL,
                URL: URL, //上传图片用的
                avatarUrl: defaultAvatarUrl,
                nickname: '',
                
                statusBar: 0,
                background: { backgroundColor: 'rgba(255,255,255,0)' },
                current: 0, //底部导航索引
                tab_list: [
                    {
                        iconPath: "/static/icon/tab.png",
                        selectedIconPath: "/static/icon/tab.png",
                        text: '',
                        pagePath: "/pages/tabbar/index",
                        customIcon: false
                    },
                    // {
                    //     iconPath: "/static/icon/tab_01.png",
                    //     selectedIconPath: "/static/icon/tab_02.png",
                    //     text: '订单',
                    //     customIcon: false,
                    //     pagePath: "/pages/tabbar/order"
                    // },
                    {
                        iconPath: "/static/icon/tab_03.png",
                        selectedIconPath: "/static/icon/tab_04.png",
                        text: '活动',
                        customIcon: false,
                        pagePath: "/pages/tabbar/activity"
                    },{
                        iconPath: "/static/icon/tab_05.png",
                        selectedIconPath: "/static/icon/tab_06.png",
                        text: '我的',
                        customIcon: false,
                        pagePath: "/pages/tabbar/mine"
                    }
                ],
                
                info: {},
                service: {},//客服
                KFshow: false,
            };
        },
        onLoad() {
            let _this = this;
            //状态栏高度
            uni.getSystemInfo({
            	success: function(res) {
            		_this.statusBar = res.statusBarHeight;
            	}
            });
        },
        onShow() {
            if (this.$getSync('userToken')) {
                this.getInfo()
            }
            this.getService()
        },
        methods: {
            toPage(url) {
                if (!this.$getSync('userToken')) {
                    this.$gTo(`/pages/login/login`)
                } else {
                    this.$gTo(url)
                }
            },
            
            // 申请服务人员
            toApply() {
                if (!this.$getSync('userToken')) {
                    this.$gTo(`/pages/login/login`)
                } else {
                    // status 0未申请 1待审核 2培训中 3驳回 4通过
                    if (this.info.status == 0) {
                        this.$gTo(`/mine/pages/apply/apply`)
                    } else {
                        this.$gTo(`/mine/pages/apply/apply-status`)
                    }
                }
            },
            
            getInfo() {
            	this.$ajax('user_detail', {
            		user_token: this.$getSync('userToken'),
            	}).then(ret => {
            		if (ret.success == 1000) {
                        this.info = ret.detail
                        this.avatarUrl = this.info.image
                        this.nickname = this.info.user_name
            		} else {
            			this.$toast(ret.msg);
            		}
            	});
            },
            
            // 修改头像
            onChooseAvatar(e) {
                console.log(e)
                if (!this.$getSync('userToken')) {
                    this.$confirm('登录后可以修改头像，是否去登录？',()=>{
                        uni.navigateTo({
                            url: '/pages/login/login'
                        });
                    })
                } else {
                    this.avatarUrl = e.detail.avatarUrl
                    if (e.detail.avatarUrl) {
                        uni.uploadFile({
                            url: this.URL + '/api/upload_image', //仅为示例，并非真实接口地址。
                            filePath: e.detail.avatarUrl,
                            name: 'image',
                            formData:{module: 'api'},
                            success: result => {
                                let data = JSON.parse(result.data).detail; //后台返回的路径data.attach_uri
                                this.avatarUrl = data.image
                                this.$ajax('update_user_detail', {
                                	user_token: this.$getSync('userToken'),
                                    image_id: data.image_id,
                                }).then(ret => {
                                	if (ret.success == 1000) {
                                		
                                	} else {
                                		this.$toast(ret.msg);
                                	}
                                });
                            }
                        });
                    }
                }
            },
            // 修改昵称
            blur(e) {
                console.log(e)
                if (!this.$getSync('userToken')) {
                    this.$confirm('登录后可以修改昵称，是否去登录？',()=>{
                        uni.navigateTo({
                            url: '/pages/login/login'
                        });
                    })
                } else {
                    this.nickname = e.detail.value
                    if (e.detail.value) {
                        this.$ajax('update_user_detail', {
                        	user_token: this.$getSync('userToken'),
                            user_name: this.nickname,
                        }).then(ret => {
                        	if (ret.success == 1000) {
                        		
                        	} else {
                        		this.$toast(ret.msg);
                        	}
                        });
                    }
                }
            },
            
            // 获取客服电话
            getService() {
            	this.$ajax('service_center', {
            		
            	}).then(ret => {
            		this.service = ret.detail
            	});
            },
            
            //切换底部导航
            tabbarChange(e) {
            	this.current = e;
            },
            
            onPageScroll: function(e) {
            	//nvue暂不支持滚动监听，可用bindingx代替
            	// console.log("滚动距离为：" + e.scrollTop);
            	let a = e.scrollTop * 0.05;
            	if (a > 1) {
            		a = 1;
            	}
            	if (e.scrollTop == 0) {
            		this.background.backgroundColor = 'rgba(255,255,255,0)';
            	} else {
            		this.background.backgroundColor = 'rgba(255,255,255,' + a + ')';
            	}
            },
        }
    };
</script>

<style>
    .u-tabbar__content__item .u-icon__img {
    	width: 50rpx !important;
    	height: 50rpx !important;
    }
    .u-tabbar__content>.u-tabbar__content__item:first-child .u-icon__img{
        width: 100rpx !important;
        height: 100rpx !important;
    }
</style>

<style lang="scss">
    
    page{
        background-color: #f7f8fb;
    }
    .img-bg{
        width: 750rpx;
        height: 400rpx;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
    }
    .wrapper{
        padding: 30rpx;
    }
    .info{
        padding-bottom: 35rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .avatar-wrapper {
        width: 110rpx;
        height: 110rpx;
        border-radius: 50%;
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        background-color: rgba(255,255,255,0) !important;
        margin-right: 30rpx;
        
        &:after {
            border: none;
        }
    }
    .avatar{
        width: 110rpx;
        height: 110rpx;
        border-radius: 50%;
        border: 2rpx solid #fff;
    }
    .name{
        font-size: 34rpx;
        padding-bottom: 10rpx;
    }
    .info-name{
        font-size: 34rpx;
        // max-width: 45vw;
        // white-space: nowrap;
        // overflow: hidden;
        // text-overflow: ellipsis;
    }
    .info-tel{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        font-size: 30rpx;
        color: #8f929f;
        padding-top: 10rpx;
    }
    .tel-02{
        width: 20rpx;
        height: 26rpx;
        margin-right: 10rpx;
    }
    
    .top{
        padding: 30rpx 20rpx;
        background-color: #fff;
        border-radius: 10rpx;
        margin-bottom: 20rpx;
    }
    .top-nav{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 15rpx;
    }
    .top-nav-item{
        font-size: 24rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .icon-07{
        width: 48rpx;
        height: 48rpx;
        margin-bottom: 15rpx;
    }
    .top-see{
        margin-top: 25rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 14rpx 25rpx;
        background-color: #f7f8fb;
        border-radius: 10rpx;
        font-size: 28rpx;
        font-weight: bold;
    }
    .top-see-sub{
        flex: 1;
        font-size: 22rpx;
        font-weight: normal;
        color: #9c9c9c;
        padding-left: 20rpx;
    }
    .top-see-btn{
        width: 128rpx;
        height: 50rpx;
        border-radius: 10rpx;
        background-color: #f29700;
        font-size: 24rpx;
        font-weight: normal;
        color: #fff;
        line-height: 1;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .next-icon{
        width: 25rpx;
        height: 25rpx;
        margin-left: 10rpx;
    }
    
    .img-04{
        width: 690rpx;
        height: 121rpx;
        margin-bottom: 20rpx;
    }
    .down-nav{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20rpx;
    }
    .img-05{
        width: 218rpx;
        height: 289rpx;
    }
    
    .down{
        padding: 0 25rpx;
        background-color: #fff;
        border-radius: 15rpx;
    }
    .item{
        font-size: 26rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 30rpx 0;
        border-bottom: 2rpx solid #e6e6e6;
    }
    .item:last-child{
        border-bottom: none;
    }
    .item>view{
        flex: 1;
    }
    .icon-11{
        width: 41rpx;
        height: 41rpx;
        margin-right: 20rpx;
    }
    
    
    // 客服弹窗
    .popup {
        width: 100vw;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    .win-box2 {
        width: 77vw;
        background-color: #ffffff;
        border-radius: 20upx;
        position: relative;
        background: #fff;
        border-radius: 10rpx;
        padding-bottom: 20rpx;
    }
    .pop-up {
        width: 77vw;
        height: 166upx;
        background: #f29700;
        color: #fff;
        border-top-left-radius: 10upx;
        border-top-right-radius: 10upx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-sizing: border-box;
        padding-left: 55upx;
        padding-right: 24upx;
        position: relative;
    }
    .school{
        font-size: 22rpx;
        padding-top: 5rpx;
    }
    .pop-up > view {
        font-size: 40upx;
        color: #ffffff;
    }
    .pop-up > image {
        font-size: 40upx;
        color: #ffffff;
        width: 290upx;
        height: 207upx;
        position: absolute;
        bottom: 0;
        right: 24upx;
    }
    .pop-call {
        width: 66vw;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        padding: 30upx 0;
        margin: 0 auto;
        font-weight: bold;
    
        image {
            width: 155rpx;
            height: 56rpx;
        }
    }
    .pop-del {
        width: 8vw;
        height: 8vw;
        position: absolute;
        left: 35vw;
        bottom: -100upx;
    }
    
</style>
